.container {
	color: #fff;
	background-color: #000;

	ul {
		list-style: none;
	}

	// header
	.header {
		position: relative;
		display: flex;
		width: 100vw;
		height: 1.6rem;
		background-color: #1d1d1f;
		align-items: center;


		.return {
			position: absolute;
			top: .875rem;
			left: .375rem;
			// font-size: .275rem;
			font-size: .275rem;
		}

		.search {
			position: absolute;
			display: flex;
			right: .375rem;
			bottom: .25rem;
			color: #999;
			font-size: .275rem;
			align-items: center;


			input::-webkit-input-placeholder {
				color: #999;
			}

			span {
				position: absolute;
				padding-left: .25rem;
				font-size: .275rem;
			}

			input {
				// position: relative;
				width: 7.85rem;
				height: .65rem;
				outline: none;
				border: 0;
				border-radius: .5rem;
				padding-left: .75rem
			}
		}
	}

	// main
	.main {
		position: relative;
		height: 100vh;
		margin: .625rem .375rem;

		ul {
			padding: 0;
		}

		ul li {
			display: flex;
			justify-content: space-between;
			margin-bottom: .375rem;
		}

		.main-l {
			width: 4.225rem;
			height: 2.2rem;

			img {
				width: 100%;
				height: 100%;
				border-radius: .125rem;
			}
		}

		.main-r {
			padding-right: .75rem;

			.title {
				font-size: .35rem;
				font-weight: 550;
			}

			p,
			.campus {
				margin-top: 0;
				margin-bottom: .1rem;
				font-size: .2875rem;
			}

			.zero-basis {
				opacity: .5;
			}

			.campus {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.appointment {
					position: relative;
					padding: .0625rem .25rem;
					text-align: center;
					border-radius: .375rem;
					color: #000;
					margin-left: .625rem;
					background-color: rgb(255, 245, 46);
				}
			}
		}
	}
}
